<template>
  <div class="charts-container">
    <a-row :gutter="[16, 16]">
      <!-- 左侧：柱状图 + 圆角环形图（竖排） -->
      <a-col :span="5">
        <div class="left-col">
          <div ref="barChart" class="chart"></div>
          <div ref="ringChart" class="chart"></div>
        </div>
      </a-col>

      <!-- 中间：地图 -->
      <a-col :span="14">
        <div ref="mapChart" class="mapchart"></div>
      </a-col>

      <!-- 右侧：折线图 + 多 Y 轴示例 -->
      <a-col :span="4">
        <div class="right-col">
          <div ref="lineChart" class="chart"></div>
          <div ref="multiYAxisChart" class="chart"></div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import * as echarts from "echarts";
import { mapData } from "@/api/mapData"; // 导入地图数据
import { useRouter } from "vue-router";
// 图表引用
const router = useRouter();

const barChart = ref(null);
const lineChart = ref(null);
const ringChart = ref(null);
const multiYAxisChart = ref(null);
const mapChart = ref(null);

// 图表实例
let barInstance, lineInstance, ringInstance, multiYAxisInstance, mapInstance;

// 跳转到广东省页面
const goToGuangdong = () => {
  router.push("/user/page/guangdong");
};

const initMap = () => {
  // 地图（去掉边框）
  if (mapChart.value) {
    echarts.registerMap("ChinaMap", mapData);
    mapInstance = echarts.init(mapChart.value);
    mapInstance.setOption({
      backgroundColor: "transparent",
      geo: {
        type: "map",
        map: "ChinaMap",
        roam: true,
        label: { show: true, color: "#fff" },
        itemStyle: {
          areaColor: "rgba(135, 206, 250, 0.6)",
          borderColor: "transparent",
        }, // 无边框
      },
    });
    //监听点击事件
    mapInstance.on("click", (params) => {
      console.log("点击的区域:", params.name);
      if (params.name === "广东省") {
        goToGuangdong();
      }
    });
  }
};
onMounted(() => {
  initMap();
});

onUnmounted(() => {
  mapInstance?.dispose();
});
// 初始化图表
const initCharts = () => {
  // 柱状图（背景透明）
  if (barChart.value) {
    barInstance = echarts.init(barChart.value);
    barInstance.setOption({
      backgroundColor: "transparent",
      title: { text: "柱状图", textStyle: { color: "#fff" } },
      grid: { show: false },
      xAxis: {
        data: ["A", "B", "C", "D"],
        axisLine: { lineStyle: { color: "#fff" } },
      },
      yAxis: { axisLine: { lineStyle: { color: "#fff" } } },
      series: [
        {
          type: "bar",
          data: [5, 20, 36, 10],
          itemStyle: { color: "rgba(0, 136, 255, 0.8)" },
        },
      ],
    });
  }

  // 折线图（透明背景）
  if (lineChart.value) {
    lineInstance = echarts.init(lineChart.value);
    lineInstance.setOption({
      backgroundColor: "transparent",
      title: { text: "折线图", textStyle: { color: "#fff" } },
      grid: { show: false },
      tooltip: {
        backgroundColor: "rgba(0, 0, 0, 0.6)",
        textStyle: { color: "#fff" },
      },
      xAxis: {
        data: ["一月", "二月", "三月", "四月"],
        axisLine: { lineStyle: { color: "#fff" } },
      },
      yAxis: { axisLine: { lineStyle: { color: "#fff" } } },
      series: [
        {
          type: "line",
          data: [820, 932, 901, 934],
          lineStyle: { color: "#0ff" },
        },
      ],
    });
  }

  // 圆角环形图（替换左侧饼图）
  if (ringChart.value) {
    ringInstance = echarts.init(ringChart.value);
    ringInstance.setOption({
      backgroundColor: "transparent",
      title: { text: "圆角环形图", textStyle: { color: "#fff" } },
      tooltip: {
        backgroundColor: "rgba(0, 0, 0, 0.6)",
        textStyle: { color: "#fff" },
      },
      series: [
        {
          type: "pie",
          radius: ["40%", "70%"], // 环形图
          roseType: "radius", // 圆角
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 234, name: "联盟广告" },
            { value: 135, name: "视频广告" },
          ],
          label: { color: "#fff" },
          itemStyle: { borderRadius: 8, borderColor: "transparent" }, // 圆角
        },
      ],
    });
  }

  // 多 Y 轴示例（替换右侧饼图）
  if (multiYAxisChart.value) {
    multiYAxisInstance = echarts.init(multiYAxisChart.value);
    multiYAxisInstance.setOption({
      backgroundColor: "transparent",
      title: { text: "多 Y 轴示例", textStyle: { color: "#fff" } },
      tooltip: {
        backgroundColor: "rgba(0, 0, 0, 0.6)",
        textStyle: { color: "#fff" },
      },
      xAxis: {
        data: ["一月", "二月", "三月", "四月"],
        axisLine: { lineStyle: { color: "#fff" } },
      },
      yAxis: [
        { type: "value", axisLine: { lineStyle: { color: "#fff" } } },
        { type: "value", axisLine: { lineStyle: { color: "#0ff" } } },
      ],
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10],
          yAxisIndex: 0, // 使用第一个 Y 轴
          itemStyle: { color: "rgba(0, 136, 255, 0.8)" },
        },
        {
          name: "增长率",
          type: "line",
          data: [0.1, 0.3, 0.2, 0.4],
          yAxisIndex: 1, // 使用第二个 Y 轴
          lineStyle: { color: "#0ff" },
        },
      ],
    });
  }
};

// 调整图表大小
const resizeCharts = () => {
  barInstance?.resize();
  lineInstance?.resize();
  ringInstance?.resize();
  multiYAxisInstance?.resize();
  mapInstance?.resize();
};

// 生命周期钩子
onMounted(() => {
  initCharts();
  window.addEventListener("resize", resizeCharts);
});

onUnmounted(() => {
  window.removeEventListener("resize", resizeCharts);
  barInstance?.dispose();
  lineInstance?.dispose();
  ringInstance?.dispose();
  multiYAxisInstance?.dispose();
  mapInstance?.dispose();
});
</script>

<style scoped>
/* 设置背景 */
.charts-container {
  width: 100%;
  padding: 20px;
  background: url("@/assets/background.jpg") no-repeat center center;
  background-size: cover;
}

/* 左侧图表 */
.left-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 右侧图表 */
.right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 图表样式（透明背景） */
.chart {
  width: 100%;
  height: 400px;
  background: transparent;
  border-radius: 8px;
  padding: 10px;
}

/* 地图样式（无边框） */
.mapchart {
  width: 900px;
  height: 1000px;
  background: transparent;
  border-radius: 8px;
}
</style>
